<template>
  <div class="wrapper">
    <div class="content">
      <h1 style="color: #f7f7f7; font-size: 36px; margin: 0; font-family: none">
        {{ titleLogo }}
      </h1>
      <loginFooter></loginFooter>
    </div>
    <div class="right">
      <div class="loginBox" v-if="type === 'QY'">
        <h3>登录企业平台</h3>
        <div ref="remind" class="remind">{{ errorMsg_QY }}</div>
        <el-form
          :model="ruleForm_QY"
          :rules="rules"
          ref="ruleForm_QY"
          label-width="0px"
          class="ruleForm_QY"
          aria-autocomplete="off"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="ruleForm_QY.userName"
              placeholder="企业账号/业主账号"
              prefix-icon="iconfont iconzhanghao"
              @focus="clearRemind('QY')"
              clearable
              @blur="ruleForm_QY.userName = changeValue($event)"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :class="isRemoteLogin ? 'isRemoteLogin' : ''"
          >
            <el-input
              type="password"
              prefix-icon="iconfont iconmima"
              clearable
              placeholder="输入登录密码"
              v-model="ruleForm_QY.password"
              show-password
              @keyup.enter.native="submitForm('ruleForm_QY')"
              @focus="clearRemind('QY')"
              @blur="ruleForm_QY.password = changeValue($event)"
            >
            </el-input>
            <div v-if="isRemoteLogin" class="remindErr">
              {{ remoteErrorMsg }}
            </div>
          </el-form-item>
          <el-form-item prop="vcode">
            <el-input
              class="vscode"
              type="text"
              v-model.trim="ruleForm_QY.vcode"
              placeholder="输入验证码"
              clearable
              @blur="ruleForm_QY.vcode = changeValue($event)"
              @keyup.enter.native="submitForm('ruleForm_QY')"
            ></el-input>
            <img :src="src" class="imgVscode" v-if="showCode" alt="" />
            <el-link @click="refreshCode" style="color: #d3e9ff !important"
              >看不清换一张</el-link
            >
          </el-form-item>
          <el-form-item v-if="isRemoteLogin" prop="vscode" class="vscodeInput">
            <el-input
              v-model.trim="ruleForm.vscode"
              placeholder="输入短信验证码"
              clearable
              @blur="ruleForm.vscode = changeValue($event)"
            ></el-input>
            <el-button
              size="medium"
              class="vscodeBtn"
              v-show="!isCount"
              @click="getVscode()"
              >获取验证码</el-button
            >
            <el-button
              type="info"
              plain
              size="medium"
              round
              v-show="isCount"
              disabled
              >{{ countDownTime }}s后重新获取</el-button
            >
          </el-form-item>
          <el-form-item class="clearfix checked" prop="checked">
            <el-checkbox v-model="ruleForm_QY.checked">记住账号</el-checkbox>
            <div class="findPassword fr">
              <el-link @click="skipPassword" :underline="false"
                >忘记密码？</el-link
              >
            </div>
          </el-form-item>
          <div class="login-btn">
            <el-button
              type="primary"
              class="submitBtnBoxCz"
              @click="submitForm('ruleForm_QY')"
              :loading="canLogin"
              >登录</el-button
            >
            <el-button plain @click="toRegister" class="toRegister"
              >注册</el-button
            >
          </div>
          <div class="toHome">
            <!-- <el-link @click="backLogin" :underline="false">返回首页</el-link> -->
          </div>
        </el-form>
      </div>
      <div class="loginBox" v-else-if="type === 'JC'">
        <!-- <div class="headerImg">
                   <img src="../../../static/img/loginImg/jcHeader.png" alt="">
               </div> -->
        <h3>登录监察平台</h3>
        <div ref="remind" class="remind">{{ errorMsg_JC }}</div>
        <el-form
          :model="ruleForm_JC"
          :rules="rules"
          ref="ruleForm_JC"
          label-width="0px"
          class="ruleForm_JC"
          aria-autocomplete="on"
        >
          <el-form-item prop="userName">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
            <el-input
              v-model="ruleForm_JC.userName"
              clearable
              placeholder="监察账号/行业主管账号/财政账号"
              prefix-icon="iconfont iconzhanghao"
              @focus="clearRemind('JC')"
              @blur="ruleForm_JC.userName = changeValue($event)"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :class="isRemoteLogin ? 'isRemoteLogin' : ''"
          >
            <el-input
              type="password"
              prefix-icon="iconfont iconmima"
              clearable
              placeholder="输入登录密码"
              v-model="ruleForm_JC.password"
              show-password
              @keyup.enter.native="submitForm('ruleForm_JC')"
              @focus="clearRemind('JC')"
              @blur="ruleForm_JC.password = changeValue($event)"
            >
            </el-input>
            <div v-if="isRemoteLogin" class="remindErr">
              {{ remoteErrorMsg }}
            </div>
          </el-form-item>
          <el-form-item prop="vcode">
            <el-input
              class="vscode"
              type="text"
              v-model.trim="ruleForm_JC.vcode"
              placeholder="输入验证码"
              clearable
              @blur="ruleForm_JC.vcode = changeValue($event)"
              @keyup.enter.native="submitForm('ruleForm_JC')"
            ></el-input>
            <img :src="src" class="imgVscode" v-if="showCode" alt="" />
            <el-link @click="refreshCode" style="color: #d3e9ff !important"
              >看不清换一张</el-link
            >
          </el-form-item>
          <el-form-item v-if="isRemoteLogin" prop="vscode" class="vscodeInput">
            <el-input
              v-model.trim="ruleForm.vscode"
              placeholder="输入短信验证码"
              clearable
              @blur="ruleForm.vscode = changeValue($event)"
            ></el-input>
            <el-button
              size="medium"
              class="vscodeBtn"
              v-show="!isCount"
              @click="getVscode()"
              >获取验证码</el-button
            >
            <el-button
              type="info"
              plain
              size="medium"
              round
              v-show="isCount"
              disabled
              >{{ countDownTime }}s后重新获取</el-button
            >
          </el-form-item>
          <el-form-item class="clearfix checked" prop="checked">
            <el-checkbox v-model="ruleForm_JC.checked">保存登录</el-checkbox>
            <div class="findPassword fr">
              <el-link @click="skipPassword" :underline="false"
                >忘记密码？</el-link
              >
            </div>
          </el-form-item>
          <div class="login-btn">
            <el-button
              type="primary"
              class="submitBtnBoxCz"
              :class="{ noBottom: type === 'JC' }"
              @click="submitForm('ruleForm_JC')"
              :loading="canLogin"
              >登录</el-button
            >
          </div>
          <div class="toHome">
            <!--                        <el-link @click="backLogin" :underline="false">返回首页</el-link>-->
          </div>
        </el-form>
      </div>
      <div class="loginBox" v-else-if="type === 'BANK'">
        <!--                <div class="headerImg">-->
        <!--                    <img src="../../../static/img/loginImg/bankHeader.png" alt="">-->
        <!--                </div>-->
        <h3>银行登录</h3>
        <div ref="remind" class="remind">{{ errorMsg_BANK }}</div>
        <el-form
          :model="ruleForm_BANK"
          :rules="rules"
          ref="ruleForm_BANK"
          label-width="0px"
          class="ruleForm_BANK"
          aria-autocomplete="on"
        >
          <el-form-item prop="userName">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
            <el-input
              v-model="ruleForm_BANK.userName"
              clearable
              placeholder="银行登录账号"
              prefix-icon="iconfont iconzhanghao"
              @focus="clearRemind('BANK')"
              @blur="ruleForm_BANK.userName = changeValue($event)"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :class="isRemoteLogin ? 'isRemoteLogin' : ''"
          >
            <el-input
              type="password"
              prefix-icon="iconfont iconmima"
              clearable
              placeholder="输入登录密码"
              v-model="ruleForm_BANK.password"
              show-password
              @keyup.enter.native="submitForm('ruleForm_BANK')"
              @focus="clearRemind('BANK')"
              @blur="ruleForm_BANK.password = changeValue($event)"
            >
            </el-input>
            <div v-if="isRemoteLogin" class="remindErr">
              {{ remoteErrorMsg }}
            </div>
          </el-form-item>
          <el-form-item prop="vcode">
            <el-input
              class="vscode"
              type="text"
              v-model.trim="ruleForm_BANK.vcode"
              placeholder="输入验证码"
              clearable
              @blur="ruleForm_BANK.vcode = changeValue($event)"
              @keyup.enter.native="submitForm('ruleForm_BANK')"
            ></el-input>
            <img :src="src" class="imgVscode" v-if="showCode" alt="" />
            <el-link @click="refreshCode" style="color: #d3e9ff !important"
              >看不清换一张</el-link
            >
          </el-form-item>
          <el-form-item v-if="isRemoteLogin" prop="vscode" class="vscodeInput">
            <el-input
              v-model.trim="ruleForm.vscode"
              placeholder="输入短信验证码"
              clearable
              @blur="ruleForm.vscode = changeValue($event)"
            ></el-input>
            <el-button
              size="medium"
              class="vscodeBtn"
              v-show="!isCount"
              @click="getVscode()"
              >获取验证码</el-button
            >
            <el-button
              type="info"
              plain
              size="medium"
              round
              v-show="isCount"
              disabled
              >{{ countDownTime }}s后重新获取</el-button
            >
          </el-form-item>
          <el-form-item class="clearfix checked" prop="checked">
            <el-checkbox v-model="ruleForm_BANK.checked">保存登录</el-checkbox>
            <div class="findPassword fr">
              <el-link @click="skipPassword" :underline="false"
                >忘记密码？</el-link
              >
            </div>
          </el-form-item>
          <div class="login-btn">
            <el-button
              type="primary"
              class="submitBtnBoxBank"
              :class="{ noBottom: type === 'BANK' }"
              @click="submitForm('ruleForm_BANK')"
              :loading="canLogin"
              >登录</el-button
            >
          </div>
          <div class="toHome">
            <!--                        <el-link @click="backLogin" :underline="false">返回首页</el-link>-->
          </div>
        </el-form>
      </div>
      <div class="loginBox" v-if="type === 'XM'">
        <!--                <div class="headerImg">-->
        <!--                    <img src="../../../static/img/loginImg/xmSmall.png" alt="">-->
        <!--                </div>-->
        <h3>登录项目平台</h3>
        <div ref="remind" class="remind">{{ errorMsg_XM }}</div>
        <el-form
          :model="ruleForm_XM"
          :rules="rules"
          ref="ruleForm_XM"
          label-width="0px"
          class="ruleForm_XM"
          aria-autocomplete="off"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="ruleForm_XM.userName"
              placeholder="项目账号"
              prefix-icon="iconfont iconzhanghao"
              @focus="clearRemind('MX')"
              clearable
              @blur="ruleForm_XM.userName = changeValue($event)"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :class="isRemoteLogin ? 'isRemoteLogin' : ''"
          >
            <el-input
              type="password"
              prefix-icon="iconfont iconmima"
              clearable
              placeholder="输入登录密码"
              v-model="ruleForm_XM.password"
              show-password
              @keyup.enter.native="submitForm('ruleForm_XM')"
              @focus="clearRemind('XM')"
              @blur="ruleForm_XM.password = changeValue($event)"
            >
            </el-input>
            <div v-if="isRemoteLogin" class="remindErr">
              {{ remoteErrorMsg }}
            </div>
          </el-form-item>
          <el-form-item prop="vcode">
            <el-input
              class="vscode"
              type="text"
              v-model.trim="ruleForm_XM.vcode"
              placeholder="输入验证码"
              clearable
              @blur="ruleForm_XM.vcode = changeValue($event)"
              @keyup.enter.native="submitForm('ruleForm_XM')"
            ></el-input>
            <img :src="src" class="imgVscode" v-if="showCode" alt="" />
            <el-link @click="refreshCode" style="color: #d3e9ff !important"
              >看不清换一张</el-link
            >
          </el-form-item>
          <el-form-item v-if="isRemoteLogin" prop="vscode" class="vscodeInput">
            <el-input
              v-model.trim="ruleForm.vscode"
              placeholder="输入短信验证码"
              clearable
              @blur="ruleForm.vscode = changeValue($event)"
            ></el-input>
            <el-button
              size="medium"
              class="vscodeBtn"
              v-show="!isCount"
              @click="getVscode()"
              >获取验证码</el-button
            >
            <el-button
              type="info"
              plain
              size="medium"
              round
              v-show="isCount"
              disabled
              >{{ countDownTime }}s后重新获取</el-button
            >
          </el-form-item>
          <el-form-item class="clearfix checked" prop="checked">
            <el-checkbox v-model="ruleForm_XM.checked">保存登录</el-checkbox>
            <div class="findPassword fr">
              <el-link @click="skipPassword" :underline="false"
                >忘记密码？</el-link
              >
            </div>
          </el-form-item>
          <!-- 恩施暂时隐藏企业注册，请勿删除 -->
          <div class="login-btn">
            <el-button
              type="primary"
              class="submitBtnBoxCz"
              @click="submitForm('ruleForm_XM')"
              :loading="canLogin"
              >登录</el-button
            >
          </div>
          <div class="toHome">
            <!--                        <el-link @click="backLogin" :underline="false">返回首页</el-link>-->
          </div>
        </el-form>
      </div>
      <div class="loginBox" v-if="type === 'DT'">
        <h3>登录接口平台</h3>
        <div ref="remind" class="remind">{{ errorMsg_DT }}</div>
        <el-form
          :model="ruleForm_DT"
          :rules="rules"
          ref="ruleForm_DT"
          label-width="0px"
          class="ruleForm_DT"
          aria-autocomplete="off"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="ruleForm_DT.userName"
              placeholder="登录账号"
              prefix-icon="iconfont iconzhanghao"
              @focus="clearRemind('DT')"
              clearable
              @blur="ruleForm_DT.userName = changeValue($event)"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :class="isRemoteLogin ? 'isRemoteLogin' : ''"
          >
            <el-input
              type="password"
              prefix-icon="iconfont iconmima"
              clearable
              placeholder="请输入密码"
              v-model="ruleForm_DT.password"
              show-password
              @keyup.enter.native="submitForm('ruleForm_DT')"
              @focus="clearRemind('DT')"
              @blur="ruleForm_DT.password = changeValue($event)"
            >
            </el-input>
            <div v-if="isRemoteLogin" class="remindErr">
              {{ remoteErrorMsg }}
            </div>
          </el-form-item>
          <el-form-item prop="vcode">
            <el-input
              class="vscode"
              type="text"
              v-model.trim="ruleForm_DT.vcode"
              placeholder="输入验证码"
              clearable
              @blur="ruleForm_DT.vcode = changeValue($event)"
              @keyup.enter.native="submitForm('ruleForm_DT')"
            ></el-input>
            <img :src="src" class="imgVscode" v-if="showCode" alt="" />
            <el-link @click="refreshCode" style="color: #d3e9ff !important"
              >看不清换一张</el-link
            >
          </el-form-item>
          <el-form-item v-if="isRemoteLogin" prop="vscode" class="vscodeInput">
            <el-input
              v-model.trim="ruleForm.vscode"
              placeholder="输入短信验证码"
              clearable
              @blur="ruleForm.vscode = changeValue($event)"
            ></el-input>
            <el-button
              size="medium"
              class="vscodeBtn"
              v-show="!isCount"
              @click="getVscode()"
              >获取验证码</el-button
            >
            <el-button
              type="info"
              plain
              size="medium"
              round
              v-show="isCount"
              disabled
              >{{ countDownTime }}s后重新获取</el-button
            >
          </el-form-item>
          <el-form-item class="clearfix checked" prop="checked">
            <el-checkbox v-model="ruleForm_DT.checked">保存登录</el-checkbox>
            <div class="findPassword fr">
              <el-link @click="skipPasswordDT" :underline="false"
                >忘记密码？</el-link
              >
            </div>
          </el-form-item>
          <div class="login-btn">
            <el-button
              type="primary"
              class="submitBtnBoxCz"
              @click="submitForm('ruleForm_DT')"
              :loading="canLogin"
              >登录</el-button
            >
            <el-button plain @click="toRegister('DT')" class="toRegister"
              >注册</el-button
            >
          </div>
          <div class="toHome">
            <!--<el-link @click="backLogin" :underline="false">返回首页</el-link>-->
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import loginHeader from '@/components/publicCom/loginHeader'
import loginFooter from '@/components/publicCom/loginFooter'
import Cookies from 'js-cookie'
import Crypto from '@/kits/crypto.js'
import JSEncrypt from 'jsencrypt'
import common from '../../kits/common'

export default {
  name: 'loginNextCz',
  components: {
    loginHeader,
    loginFooter,
  },
  data() {
    //验证验证码
    var validateVscode = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('验证码不能为空'))
      } else {
        this.axios({
          method: 'post',
          url: 'api-bs/message/base/checkvc',
          data: {
            tel: this.phone,
            vc: value,
          },
        }).then(
          (res) => {
            if (!res.data.hasError) {
              callback()
            } else {
              callback(new Error(res.data.errorMsg))
            }
          },
          (response) => {
            callback(new Error('验证失败'))
          }
        )
      }
    }
    return {
      auth_timetimer: null, //验证码定时器
      isRemoteLogin: false, //异地登录
      isCount: false, //是否在倒计时
      countDownTime: 60 /*倒计时 计数器*/,
      phone: '', //验证手机
      remoteErrorMsg: '', //异地登录错误信息
      ruleForm_QY: {
        userName: '',
        password: '',
        checked: false,
        vscode: '',
        vcode: '',
      },
      ruleForm_JC: {
        userName: '',
        password: '',
        checked: false,
        vscode: '',
        vcode: '',
      },
      ruleForm_BANK: {
        userName: '',
        password: '',
        checked: false,
        vscode: '',
        vcode: '',
      },
      ruleForm_XM: {
        userName: '',
        password: '',
        checked: false,
        vscode: '',
        vcode: '',
      },
      ruleForm_DT: {
        userName: '',
        password: '',
        checked: false,
        vscode: '',
        vcode: '',
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        vscode: [
          {
            required: true,
            validator: validateVscode,
            trigger: 'blur',
          },
        ],
        vcode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      type: '', //登录类型
      useyType: '', //用户类型
      errorMsg_QY: '', //企业端错误提示
      errorMsg_JC: '', //监察端错误提示
      errorMsg_BANK: '', //银行端错误提示
      errorMsg_XM: '', //项目端错误提示
      errorMsg_DT: '', //接口平台错误提示
      ruleForm: '',
      canLogin: false, //是否可以点击登录
      bg: '', //背景图
      hasCommandCenter: false, //是否有大屏，有则跳转
      selectedName: '',
      esRegister: false, //恩施注册
      publicKey: '', //公钥
      loginIndex: '', //加密登录要传的index
      titleLogo: '',
      showCode: true,
      src: '',
    }
  },
  beforeCreate() {
    this.type = this.$route.query.type
    localStorage.setItem('loginType', this.type)
  },
  created() {
    this.getPublicKey()
    if (this.isEsUser()) {
      this.esRegister = true
    }
    if (this.isCzUser()) {
      this.titleLogo = '滁州市农民工权益保障监管系统'
    } else if (this.isYichunUser()) {
      this.titleLogo = '宜春市农民工工资支付监控预警系统'
    }
    this.type = this.$route.query.type

    this.$nextTick(function () {
      if (this.type === 'JC') {
        this.bg = this.$store.state.areaInfoArr.monitorBgImg
      } else if (this.type === 'BANK') {
        this.bg = this.$store.state.areaInfoArr.bankBgImg
      } else if (this.type === 'QY') {
        this.bg = this.$store.state.areaInfoArr.companyBgImg
      } else if (this.type === 'XM') {
        this.bg = this.$store.state.areaInfoArr.projectBgImg
      }
    })

    this.selectedName = this.$route.query.selectedName

    this.getCookie(this.type)
    this.themeGray()
    //  重置密码强度
    localStorage.setItem('pwIsStrong', true)
  },
  methods: {
    //滁州换肤
    themeGray() {
      this.$store.commit('changeIsShow', false)
      document.body.className = 'theme_cold'
      localStorage.setItem('themeColor', 'theme_cold')
    },
    //跳转忘记密码
    skipPassword() {
      this.$router.push({
        path: '#/findPassword/findPassword',
        name: 'findPassword',
        query: {
          type: this.type,
        },
      })
    },
    skipPasswordDT() {
      this.$router.push({
        path: '#/findPassword/findPasswordInterface',
        name: 'findPasswordInterface',
      })
    },
    //跳转注册
    toRegister(type) {
      //注册申请接口平台账号
      if (type == 'DT') {
        this.$router.push({
          path: '#/register/registerInterfaceAccount',
          name: 'registerInterfaceAccount',
        })
      } else {
        this.$router.push({
          path: '#/register/register',
          name: 'register',
        })
      }
    },
    //返回首页
    backLogin() {
      this.$router.push({
        path: '#/login/loginFirst',
        name: 'loginFirst',
      })
    },
    toLogin(formName) {
      //先获取公钥
      // this.getPublicKey(formName);
      this.toLoginNext(formName)
    },
    //发送验证码倒计时
    countDown() {
      let vm = this
      //开启倒计时
      vm.isCount = true
      this.auth_timetimer = setInterval(() => {
        vm.countDownTime--
        if (vm.countDownTime <= 0) {
          vm.isCount = false
          clearInterval(vm.auth_timetimer)
        }
      }, 1000)
    },
    //发送验证码
    sendVscode() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-bs/message/base/sendvc',
        data: {
          tel: vm.phone,
        },
      })
        .then(
          (res) => {
            //验证码失败
            if (res.data.hasError) {
              this.$message({
                showClose: true,
                duration: 3000,
                message: '验证码发送失败',
                type: 'error',
              })
            } else {
            }
          },
          (res) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '验证码发送失败',
              type: 'error',
            })
            vm.isCount = false
          }
        )
        .catch((error) => {
          vm.isCount = false
        })
    },
    //发送短信验证码
    getVscode() {
      //验证码倒计时
      this.isCount = true
      this.countDownTime = 60
      this.countDown()
      this.sendVscode()
    },
    //提交登录
    toLoginNext(formName) {
      let self = this
      // 生成设备ID
      // if(!localStorage.getItem("APP_ID")){
      //     const ID = this.genID(32);
      //     localStorage.setItem("APP_ID",ID);
      // }
      let data = {
        username: this.getEncrypt(self.ruleForm.userName.replace(/\s+/g, '')),
        password: this.getEncrypt(self.ruleForm.password.replace(/\s+/g, '')),
        userType: self.useyType,
        index: this.loginIndex,
        vc: self.ruleForm.vcode,
        // deviceId: localStorage.getItem("APP_ID"),
      }
      // if(this.isRemoteLogin){
      //     Object.assign(data,{
      //         smsCode: this.ruleForm.vscode,
      //     });
      // }
      self
        .axios({
          method: 'post',
          // url: "v1/sys/login",
          url: 'api-u/sys/login',
          data,
        })
        .then(
          async (res) => {
            if (!res.data.hasError) {
              //存储token refresh_token
              localStorage.setItem('access_token', res.data.result.access_token)
              localStorage.setItem(
                'refresh_token',
                res.data.result.refresh_token
              )
              //存贮密码强度
              this.setPwLevel(self.ruleForm.password.replace(/\s+/g, ''))
              localStorage.removeItem('projectEmployee')
              localStorage.removeItem('projectSalary')
              await self.getUserType()
              var userName = self.ruleForm.userName.replace(/\s+/g, '')
              var password = self.ruleForm.password.replace(/\s+/g, '')
              var type = self.type
              //判断复选框是否被勾选 勾选则调用配置cookie方法
              if (self.ruleForm.checked == true) {
                Cookies.set('userType_' + type, type, { expires: 7 })
                Cookies.set('userName_' + type, Crypto.encrypt(userName), {
                  expires: 7,
                })
                Cookies.set('password_' + type, Crypto.encrypt(password), {
                  expires: 7,
                })
              } else {
                //清空Cookie
                Cookies.remove('userType_' + type)
                Cookies.remove('userName_' + type)
                Cookies.remove('password_' + type)
              }
              await self.getUserName().then(function (result) {
                if (self.hasCommandCenter && self.type == 'JC') {
                  self.$router.push('/emptyFile/commandCenter')
                } else if (
                  self.$store.state.userType == 'COMPANY' &&
                  localStorage.getItem('isFirstIdentityChoice') == null
                ) {
                  //企业首次登陆选择建设方和施工方
                  self.$router.push('/common/identityChoice')
                } else {
                  self.getMenuList(
                    res.data.result.access_token ||
                      localStorage.getItem('access_token')
                  )
                }
              })
            } else {
              if (res.data.errorCode === '2003') {
                // 显示获取验证码
                const results = res.data.result
                this.isRemoteLogin = true
                this.phone = results.mobile
                this.remoteErrorMsg = res.data.errorMsg
              } else {
                if (formName == 'ruleForm_QY') {
                  self.errorMsg_QY = res.data.errorMsg
                } else if (formName == 'ruleForm_BANK') {
                  self.errorMsg_BANK = res.data.errorMsg
                } else if (formName == 'ruleForm_XM') {
                  self.errorMsg_XM = res.data.errorMsg
                } else if (formName == 'ruleForm_JC') {
                  self.errorMsg_JC = res.data.errorMsg
                } else if (formName == 'ruleForm_DT') {
                  self.errorMsg_DT = res.data.errorMsg
                }
              }
              self.canLogin = false
            }
          },
          (res) => {
            self.canLogin = false
            if (formName == 'ruleForm_QY') {
              self.errorMsg_QY = res.data.errorMsg
            } else if (formName == 'ruleForm_BANK') {
              self.errorMsg_BANK = res.data.errorMsg
            } else if (formName == 'ruleForm_XM') {
              self.errorMsg_XM = res.data.errorMsg
            } else if (formName == 'ruleForm_JC') {
              self.errorMsg_JC = res.data.errorMsg
            } else if (formName == 'ruleForm_DT') {
              self.errorMsg_DT = res.data.errorMsg
            }
          }
        )
        .catch((error) => {
          //报错进入
          self.canLogin = false
          if (formName == 'ruleForm_QY') {
            self.errorMsg_QY = '数据获取失败'
          } else if (formName == 'ruleForm_BANK') {
            self.errorMsg_BANK = '数据获取失败'
          } else if (formName == 'ruleForm_XM') {
            self.errorMsg_XM = '数据获取失败'
          } else if (formName == 'ruleForm_JC') {
            self.errorMsg_JC = '数据获取失败'
          } else if (formName == 'ruleForm_DT') {
            self.errorMsg_DT = '数据获取失败'
          }
        })
    },
    submitForm(formName) {
      this.canLogin = true
      if (formName == 'ruleForm_QY') {
        this.ruleForm = this.ruleForm_QY
        this.useyType = 'COMPANY'
      } else if (formName == 'ruleForm_BANK') {
        this.ruleForm = this.ruleForm_BANK
        this.useyType = 'BANK'
      } else if (formName == 'ruleForm_XM') {
        this.ruleForm = this.ruleForm_XM
        this.useyType = 'PROJECT'
      } else if (formName == 'ruleForm_JC') {
        this.ruleForm = this.ruleForm_JC
        this.useyType = 'MONITOR'
      } else if (formName == 'ruleForm_DT') {
        this.ruleForm = this.ruleForm_DT
        this.useyType = 'INPUT'
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //登录
          this.toLogin(formName)
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //设置cookie
    setCookie(name, pwd, exdays, type) {
      var exdate = new Date() //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        'userName_' +
        type +
        '=' +
        name +
        ';path=/;expires=' +
        exdate.toGMTString()
      window.document.cookie =
        'userPwd_' +
        type +
        '=' +
        pwd +
        ';path=/;expires=' +
        exdate.toGMTString()
    },
    //读取cookie
    getCookie(type) {
      var vm = this
      if (document.cookie.length > 0) {
        ////判断查找相对应的入口
        if (Cookies.get('userType_' + type) == type) {
          vm['ruleForm_' + type].userName = Crypto.decrypt(
            Cookies.get('userName_' + type)
          )
          vm['ruleForm_' + type].password = Crypto.decrypt(
            Cookies.get('password_' + type)
          )
          vm['ruleForm_' + type].checked = true
        } else {
          vm.clearLoginInfo(type)
        }
      } else {
        vm.clearLoginInfo(type)
      }
    },
    //清空登录信息
    clearLoginInfo(type) {
      this['ruleForm_' + type].userName = ''
      this['ruleForm_' + type].password = ''
      this['ruleForm_' + type].checked = false
    },
    //清除提示
    clearRemind(type) {
      if (type === 'QY') {
        this.errorMsg_QY = ''
      } else if (type === 'BANK') {
        this.errorMsg_BANk = ''
      } else if (type === 'XM') {
        this.errorMsg_XM = ''
      } else if (type === 'JC') {
        this.errorMsg_JC = ''
      } else {
        this.errorMsg_DT = ''
      }
    },
    //获取按钮权限
    getUserType() {
      this.axios({
        method: 'get',
        url: 'api-u/users/current',
      })
        .then((response) => {
          //用户类型
          this.$store.state.userType = response.data.type
          if (this.$store.state.userType != 'COMPANY') {
            localStorage.removeItem('judgeRoleCode')
          } else {
            this.$store.commit('SET_INFO', [
              'companyId',
              response.data.companyId,
            ])
          }
          this.$store.state.uscc = response.data.uscc
          this.$store.state.industryId = response.data.industryId
          this.$store.state.buttonLimitsArr = response.data.permissions
            ? response.data.permissions
            : []
          this.$store.state.accountType = response.data.type
          this.$store.state.isHefeng = response.data.isHefeng
          this.$store.commit('SET_INFO', [
            'currentAreaId',
            response.data.areaId,
          ])
          this.$store.state.userId = response.data.id
          this.$store.state.userTel = response.data.phone
          this.$store.state.usernameAndType =
            response.data.username + '(' + response.data.typeDesc + ')'
          this.$store.state.sysRolesArr = response.data.sysRoles
        })
        .catch((resp) => {})
    },
    getMenuList(token) {
      //企业选择建设方记录JSF
      if (this.$store.state.userType == 'COMPANY') {
        if (localStorage.getItem('choiceType')) {
          //重置judgeRoleCode 为 choiceType
          localStorage.setItem(
            'judgeRoleCode',
            localStorage.getItem('choiceType')
          )
        }
        this.selectedName = localStorage.getItem('choiceType')
      }
      this.axios({
        method: 'post',
        url: '/api-m/menus/me',
        data: {
          selectedName: this.selectedName,
        },
        headers: {
          // 'Content-Type': 'application/json',//设置请求头请求格式为JSON
          Authorization: token, //设置token 其中K名要和后端协调好
        },
      })
        .then(
          (response) => {
            //先清除之前的选中
            //清除tab栏数据
            this.$store.state.sliderBar = []
            this.$store.state.keekAlives = []
            localStorage.removeItem('sliderBar')
            // 顶部栏的选中清空
            this.$store.state.currentItem = ''
            this.$store.state.currentSelectItem = ''
            this.canLogin = false
            if (response.data == '' || response.data == null) {
              this.errorMsg_QY = '该账号未分配权限'
              this.errorMsg_JC = '该账号未分配权限'
              this.errorMsg_BANK = '该账号未分配权限'
              this.errorMsg_XM = '该账号未分配权限'
              this.errorMsg_DT = '该账号未分配权限'
              return
            }
            // 处理返回数据，设置默认选中项
            for (var i = 0; i < response.data.appList.length; i++) {
              var item = response.data.appList[i]
              if (item.isSelected) {
                response.data.appList.splice(i, 1)
                response.data.appList.unshift(item)
              }
            }
            // 处理数据结束
            this.$store.state.menuList = response.data.appList[0].menuList
            var menuListTotalCon = []
            for (var i = 0; i < response.data.appList.length; i++) {
              var item = response.data.appList[i]
              menuListTotalCon.push(response.data.appList[i].menuList)
            }
            var menuListTotal = []
            for (var i = 0; i < menuListTotalCon.length; i++) {
              menuListTotal = menuListTotal.concat(menuListTotalCon[i])
            }
            this.$store.state.menuListTotal = menuListTotal
            this.$store.state.appList = response.data.appList
            this.$store.state.currentItem = ''
            //默认选中
            var item = response.data.appList[0]
            //默认选中
            if (item.menuList[0].child) {
              this.$router.push(item.menuList[0].child[0].url)
              this.$store.state.activeMenu = item.menuList[0].child[0].url
              //tab栏选中
              this.$store.state.sliderBar = [item.menuList[0].child[0]]
              this.$store.state.activeIndex = item.menuList[0].child[0].url
            } else {
              //code 非建领域(company)  建设领域(project)  建设业主(owner)   总承包施工企业(project)
              if (this.$store.state.userType === 'COMPANY') {
                if (item.code == 'company') {
                  localStorage.setItem('urlName', 'companyHome')
                } else if (item.code == 'owner') {
                  localStorage.setItem('urlName', 'constructCompanyHomeJS')
                } else if (
                  item.code == 'project' ||
                  item.code == 'constructor'
                ) {
                  localStorage.setItem('urlName', 'constructCompanyHome')
                }
              } else if (
                this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
                this.$store.state.userType == 'LABOR_ADMINISTRATOR'
              ) {
                localStorage.setItem('urlName', 'projectHome')
              } else if (this.$store.state.userType == 'FENBAO_MANAGER') {
                localStorage.setItem('urlName', 'subcontractHome')
              } else if (this.$store.state.userType == 'PROJECT_OWNER') {
                localStorage.setItem('urlName', 'constructCompanyHomeJS')
              } else if (this.type === 'DT') {
                //接口平台
                var homeUrl = response.data.appList[0].menuList[0].url
                if (homeUrl == '/home') {
                  localStorage.setItem('urlName', 'interfaceAccountClient')
                } else {
                  //tab栏选中
                  this.$store.state.sliderBar = [item.menuList[0]]
                  this.$store.state.activeIndex = item.menuList[0].url
                }
              } else {
                this.$store.state.judgeItemCode = item.code
                localStorage.setItem('judgeRoleCode', item.code)
                if (item.code == 'company') {
                  localStorage.setItem('urlName', 'monitorHome')
                } else if (item.code == 'project') {
                  if (this.isCzUser()) {
                    var czUrl = response.data.appList[0].menuList[0].url
                    if (czUrl == '/home/chuhzhouChart/index') {
                      localStorage.setItem('urlName', 'chuhzhouChart')
                    }
                  } else {
                    localStorage.setItem('urlName', 'constructMonitorHome')
                  }
                  //区分全国演示监察首页
                  // if(this.isYS()||this.isCCUser()) {
                  //         localStorage.setItem("urlName","index");
                  //     } else {
                  //         localStorage.setItem("urlName","constructMonitorHome");
                  //     }
                }
              }
              this.$router.push(item.menuList[0].url)
              this.$store.state.activeMenu = item.menuList[0].url
              //tab栏选中
              localStorage.removeItem('sliderBar')
            }
          },
          (response) => {
            this.isAdd = false
            this.$message.error('登录失败')
            this.canLogin = false
          }
        )
        .catch((error) => {
          //   this.$message.error('登录失败');
          //   this.canLogin = false;
        })
    },
    //获取用户名称
    async getUserName() {
      var vm = this
      await vm
        .axios({
          method: 'get',
          url: 'api-o/user-me',
        })
        .then(
          (res) => {
            this.$store.state.nickName = res.data.principal.nickname
            this.$store.state.deptmentName = res.data.principal.deptmentName
            //用户类型
            this.$store.state.userType = res.data.principal.type
          },
          (res) => {
            this.$message.error('获取用户名失败')
            this.canLogin = false
          }
        )
        .catch((error) => {
          this.$message.error('获取用户名失败')
          this.canLogin = false
        })
    },
    getPublicKey(formName) {
      this.axios({
        method: 'post',
        url: 'api-u/sys/pubkey',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.publicKey = response.data.result.publicKey
              this.loginIndex = response.data.result.index
              // this.toLoginNext(formName);
              this.getCode()
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 使用公钥 加密
    getEncrypt(data) {
      let encrypt = new JSEncrypt()
      // 设置公钥
      encrypt.setPublicKey(this.publicKey)
      return encrypt.encrypt(data)
    },
    //存贮密码强度
    setPwLevel(password) {
      var enoughRegex = new RegExp('(?=.{6,}).*', 'g')
      if (password.length < 7 || false == enoughRegex.test(password)) {
        localStorage.setItem('pwIsStrong', false)
      } else {
        localStorage.setItem('pwIsStrong', true)
      }
    },
    genID(length) {
      // 随机字符串+时间戳
      var str = ''
      for (; str.length < length; str += Math.random().toString(36).substr(2));
      return str.substr(0, length - 13) + Date.now().toString()
    },
    refreshCode() {
      this.src = ''
      this.showCode = false
      this.$nextTick(function () {
        this.showCode = true
        this.getCode()
      })
    },
    getCode() {
      this.src =
        common.commonApi + 'api-u/sys/getVCode?index=' + this.loginIndex
    },
  },
  beforeDestroy() {
    this.auth_timetimer && clearInterval(this.auth_timetimer)
  },
}
</script>

<style scoped lang="less">
.wrapper {
  width: 100%;
  display: flex;
}
.wrapper .content {
  flex: 1;
  min-height: 100vh;
  padding: 20px;
  background: url('../../../static/img/loginImg/login_bg_chuzhou.png') no-repeat;
  background-size: 100% 100%;
}
.wrapper .right {
  // width: 25%;
  height: 100vh;
  background: linear-gradient(0deg, #36556b, #7494a9 52%, #3e5a6c);
}
.container {
  height: 100%;
  width: 100%;
  background: url('../../../static/img/loginImg/login_bg_chuzhou.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.isJcContainer {
  background: url('../../../static/img/loginImg/jcBG.jpg') no-repeat;
  background-size: 100% 100%;
}
.isBankContainer {
  background: url('../../../static/img/loginImg/bankBj.png') no-repeat;
  background-size: 100% 100%;
}

.loginBox {
  margin: 0 auto;
  margin-top: 30%;
  padding: 0 30px;
  .remind {
    height: 30px;
    text-align: center;
    color: red;
    margin-bottom: 5px;
    /*position: absolute;*/
    /*top: 32px;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    /*-ms-transform: translateX(-50%);*/
    /*-moz-transform: translateX(-50%);*/
    /*-webkit-transform: translateX(-50%);*/
    /*-o-transform: translateX(-50%);*/
  }
  .isRemoteLogin {
    margin-bottom: 5px !important;
  }
  .remindErr {
    margin-top: 5px;
    width: 340px;
    text-align: left;
    color: red;
    line-height: 20px;
  }
  h3 {
    font-family: SourceHanSansCN-Medium;
    font-size: 24px;
    color: #f7f7f7;
    text-align: left;
    padding-top: 62px;
    margin-bottom: 132px;
    font-weight: 400;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .checked {
    margin-top: 14px;
    margin-bottom: 0;
    /deep/ .el-form-item__content {
      line-height: 14px;
    }
    /deep/ .el-checkbox__inner {
      background-color: #4d6d82 !important;
      border-color: #55758a !important;
    }
    /deep/ .el-checkbox__label {
      color: #d3e9ff !important;
    }
  }

  .fix_padding {
    border: 0;
    input {
      border-color: #cccfd5 !important;
      padding-left: 40px;
    }
  }

  .el-input {
    /deep/ .el-input__inner {
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      border-width: 0 0 1px;
      border-radius: 0;
      color: #f7f7f7;
      padding-left: 42px;
    }
  }
  /deep/ .el-input__prefix {
    left: 16px;
  }
  .login-btn {
    /deep/ .toRegister {
      margin-left: 0;
    }
    /deep/ .el-button {
      width: 100%;
    }
    .submitBtnBoxCz {
      margin: 32px 0 10px 0;
    }
    .submitBtnBoxCz,
    .toRegister {
      // margin: 32px 0 10px 0;
      border: none;
      color: #285272;
      background: #e3f6ff;
      border-color: #e3f6ff;
    }

    .submitBtnBoxCz:hover,
    .toRegister:hover {
      background: #9ebece;
      border-color: #9ebece;
      color: #fff;
    }
    .submitBtnBoxBank {
      margin: 32px 0 10px 0;
      border: none;
      color: #fff;
      background: #fda028;
      background: #fda028;
    }

    .submitBtnBoxBank:hover {
      background: #fdb353;
      border-color: #fdb353;
      color: #fff;
    }

    .toRegister:hover {
      //  background: #fff;
      //  border-color: #33AAA0;
      //  color: #33AAA0;
    }

    .noBottom {
      margin-bottom: 0;
    }
  }

  .toHome {
    padding: 24px 0 32px 0;
    text-align: center;
  }
}
.vscodeInput {
  .el-input {
    width: 205px;
  }
  .vscodeBtn {
    width: 108px;
    border: 1px solid #009588;
    color: #009588;
    margin-left: 19px;
  }
  /deep/ .el-button--info {
    width: 115px;
    margin-left: 12px;
    padding: 10px 0;
  }
}
.container /deep/ .topTitleBox {
  background: url('../../../static/img/loginImg/qyTop.png') no-repeat;
  background-size: 100% 100%;
}

.isJcContainer /deep/ .topTitleBox {
  background: url('../../../static/img/loginImg/jcTop.png') no-repeat;
  background-size: 100% 100%;
}
.isBankContainer /deep/ .topTitleBox {
  background: url('../../../static/img/loginImg/bankTop.png') no-repeat;
  background-size: 100% 100%;
}
.findPassword .el-link.el-link--default {
  color: #d3e9ff !important;
}

.imgVscode {
  display: inline-block;
  width: 90px;
  margin: 0 10px;
  height: 36px;
  vertical-align: top;
}
.vscode {
  width: 120px;
  &.el-input {
    /deep/ .el-input__inner {
      padding-left: 20px !important;
    }
  }
}

/deep/ .el-input__inner {
  &::placeholder {
    color: #fff;
    opacity: 0.5;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #fff;
    opacity: 0.5;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #fff;
    opacity: 0.5;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #fff;
    opacity: 0.5;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #fff;
    opacity: 0.5;
  }
}
</style>
